<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>

<c:url value="/contact/new.html" var="createContact"/>
<c:url value="/league/new.html" var="createLeague"/>
<c:url value="/location/new.html" var="createLocation"/>
<c:url value="/resources/jQuery/jquery-1.7.2.min.js" var="jquery"/>
<c:url value="/resources/jQuery/jquery-ui-1.8.21.custom.min.js" var="jqueryUI"/>
<c:url value="/resources/css/cupertino/jquery-ui-1.8.21.custom.css" var="jQueryCSS" />


<script type="text/javascript" src="${jquery}" ></script>
<script type="text/javascript" src="${jqueryUI}" ></script>
<link type="text/css" href="${jQueryCSS}" rel="Stylesheet" />

<script type="text/javascript">
	 $(document).ready(function(){
	 $("#tabs").show();	 
	 $( "#tabs" ).tabs({
		 event: "click",
		 collapsible: "false"
	 });
	 
	 $("#createLeagueButton").button();
	 $("#createLeagueButton").click(function() {
		$("#createLeagueForm").dialog({
	            title: "Create a League",                
		            width: "auto",
		            height: "auto",
		            modal: true,
		            resizable: false
				});
		return false;
	 });
	 
	 $("#createContactButton").button();
	 $("#createContactButton").click(function() {
		$("#createContactForm").dialog({
	            title: "Create a Contact",                
		            width: "auto",
		            height: "auto",
		            modal: true,
		            resizable: false
				});
		return false;
	 });
	
	 $("#createLocalButton").button();
	 $("#createLocalButton").click(function() {
		$("#createLocalForm").dialog({
	            title: "Create a Location",                
		            width: "auto",
		            height: "auto",
		            modal: true,
		            resizable: false
				});
		return false;
	 });
	
	 });
</script>
<style>
body {
  background-color: #B6BCFA;
}

table {
  border-style: solid;
  border-width: 2px;
  border-color: #B6BCFA;
  width: 95%;
}

table td {
  text-align: center;
}

tr {
  padding: 0px;
  height: 20px;
}


tr.odd {
  background-color: #B6BCFA;
}

tr.odd td {
  padding:0;
}
</style>

<html>
  <body>
   <jsp:include page="templates/header.jsp"></jsp:include>
    <h4 style="margin-top: 0px;" >Manager Home</h4>
    <div id="tabs" style="display:none">
      <ul>
		<li><a href="#tabs-1">Leagues</a></li>
		<li><a href="#tabs-2">Locations</a></li>
		<li><a href="#tabs-3">Contacts</a></li>
	  </ul>
	  <div id="tabs-1">
	  <table>
	  <tbody>
	  <tr><th>Name</th><th>Season</th><th>Year</th><th>Admin</th></tr>
	    <c:forEach items="${leagues}" var="league" varStatus="loop">
	      <c:choose>
	      <c:when test="${loop.index % 2 eq 0}">
	      <tr class="odd"><td><a href=<c:url value="/league/view.html?name=${league.league.encodedName}" />>${league.league.leagueName}</a></td>
           <td>${league.league.season}</td><td> ${league.league.year}</td><td>${league.admin.fullName}</td></tr>
	      </c:when>
	      <c:otherwise>
	      <tr><td><a href=<c:url value="/league/view.html?name=${league.league.encodedName}" />>${league.league.leagueName}</a></td>
           <td>${league.league.season}</td><td> ${league.league.year}</td><td>${league.admin.fullName}</td></tr>
	      </c:otherwise>
	      </c:choose> 
        </c:forEach>
        </tbody>
	  </table>	
	  	<sec:authorize access="hasRole('Admin')">
	  	<br />
          <div id="createLeagueButton">Create New League</div>
          <jsp:include page="forms/createLeague.jsp"></jsp:include>
        </sec:authorize>
      </div>
      <div id="tabs-2">
	  <table>
	  <tbody>
	  <tr><th>POC</th><th>LocationID</th><th>Street</th><th>City</th><th>Zip Code</th></tr>
	    <c:forEach items="${locations}" var="local" varStatus="loop">
	       <c:choose>
	      <c:when test="${loop.index % 2 eq 0}">
          <tr class="odd"><td>${local.contact.fullName}</td><td>${local.location.locationID}</td><td>${local.location.street}</td>
          <td>${local.location.city}</td><td>${local.location.zipCode}</td></tr>
          </c:when>
          <c:otherwise>
          <tr><td>${local.contact.fullName}</td><td>${local.location.locationID}</td><td>${local.location.street}</td>
          <td>${local.location.city}</td><td>${local.location.zipCode}</td></tr>
          </c:otherwise>
          </c:choose>
        </c:forEach>
        </tbody>
	  </table>	
	  	<sec:authorize access="hasRole('Admin')">
	  	<br />
           <div id="createLocalButton">Create New Location</div>
          <jsp:include page="forms/createLocation.jsp"></jsp:include>
        </sec:authorize>       
      </div>
	  <div id="tabs-3">
	  <table>
	  <tbody>
	  <tr><th>Name</th><th>Email</th><th>Role</th></tr>
	  <c:forEach items="${contacts}" var="contact" varStatus="loop">
	       <c:choose>
	      <c:when test="${loop.index % 2 eq 0}">
          <tr class="odd"><td><a href="contact/view.html?id=${contact.contactID}">${contact.fullName}</a></td><td>${contact.email}</td><td>${contact.roleString}</td></tr>
          </c:when>
          <c:otherwise>
          <tr><td><a href="contact/view.html?id=${contact.contactID}">${contact.fullName}</a></td><td>${contact.email}</td><td>${contact.roleString}</td></tr>
          </c:otherwise>
          </c:choose>
        </c:forEach>
	  </tbody>
	  </table>
		
		<sec:authorize access="hasAnyRole('Admin','Coach')">
		<br/>
		  <div id="createContactButton">Create New Contact</div>
          <jsp:include page="forms/createContact.jsp"></jsp:include>
		</sec:authorize>
	  </div>
    </div>
    
  </body>
</html>